<script setup>
import { ref, reactive, defineProps } from "vue";
const props = defineProps({
  course: { type: Object, default: () => {} },
});
const baseImgUrl = "/src/assets/img/course-bg.jpg";
const handleError = (event) => {
  event.target.src = baseImgUrl; // 指定备用图片的路径
};
</script>
<template>
  <div class="card shadow-sm border-0">
    <img
      class="card-img-top"
      :src="course.course_img"
      :alt="course.course_name"
      @error="handleError"
    />
    <div class="card-body">
      <h6 class="card-title">{{ course.course_name }}</h6>
      <div class="d-flex justify-content-between">
        <span
          :class="
            'card-text ' +
            (course.course_status === '正在报名'
              ? 'text-muted'
              : 'text-black-50')
          "
          >{{ course.course_status }}</span
        >
        <span class="">
          <i class="fal fa-clock" /> {{ course.end_time.slice(0, 10) }}</span
        >
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.card {
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  &:hover {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5) !important;
    .card-title {
      color: black;
    }
  }
}
</style>
